<template>
  <div class="training-class-page">
    <!-- 培训班基本信息 -->
    <div class="class-info">
      <span class="info-item">培训班编号：{{trainingClassCode}}</span>
      <span class="info-item">培训班名称：{{className}}</span>
      <span class="info-item">培训班交接状态：{{handoverStatus}}</span>
    </div>

    <!-- 搜索区域 -->
    <div class="search-form" v-show="showSearch">
      <el-form inline :model="searchForm" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入姓名"
            clearable
            @keyup.enter.native="handleSearch"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input
            v-model="searchForm.phone"
            placeholder="请输入手机号码"
            clearable
            @keyup.enter.native="handleSearch"
          ></el-input>
        </el-form-item>
        <el-form-item label="证件编号">
          <el-input
            v-model="searchForm.idCard"
            placeholder="请输入证件编号"
            clearable
            @keyup.enter.native="handleSearch"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="operation-buttons">
      <el-button type="primary" plain  @click="handleExport">导出</el-button>
      <el-button type="primary" plain @click="handleAddStudent">添加学员</el-button>
      <el-button
        type="primary" plain
        :disabled="selectedIds.length === 0"
        @click="handleRemoveStudents"
      >移出学员</el-button>
      <el-button
      type="primary" plain
        @click="handleViewDetail"
        :disabled="selectedIds.length !== 1"
      >查看学员详情</el-button>
      <el-button
      type="primary" plain
        @click="handleRemark"
        :disabled="selectedIds.length !== 1"
      >学员备注</el-button>
      <el-button
      type="primary" plain
        @click="handleStudentNotice"
        :disabled="selectedIds.length === 0"
      >学员通知</el-button>
      <el-button @click="handleCode" type="primary" plain >班级二维码</el-button>
      <el-button @click="handleSchedule" type="primary" plain > 实践预约情况</el-button>
      <el-button @click="handleHandoverUse" v-if="showHandoverUseButton" type="primary" plain >班级交接</el-button>
      <el-button @click="handleHandover" v-if="showHandoverButton" type="primary" plain >交接确定</el-button>
      <el-button @click="handleHandoverHistory" type="primary" plain >交接备注历史</el-button>
      <el-button style="margin-left: 20px;" @click="showSearch = !showSearch" type="primary" plain >
        {{ showSearch ? '隐藏搜索' : '显示搜索' }}
      </el-button>
      <el-button @click="handleRefresh" type="primary" plain >刷新</el-button>
    </div>

    <!-- 学员数据表格 -->
    <el-table
      v-loading="loading"
      :data="mappedTableData"
      border
      style="width: 100%; margin-top: 10px;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="姓名" width="80"></el-table-column>
      <el-table-column prop="idCard" label="证件编号" width="180"></el-table-column>
      <el-table-column prop="gender" label="性别" width="60"></el-table-column>
      <el-table-column prop="phone" label="电话" width="120"></el-table-column>
      <el-table-column prop="registerSource" label="报名来源" width="120">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.bmlb" :value="scope.row.registerSource"/>
        </template>
      </el-table-column>
      <el-table-column prop="trainingType" label="培训类型" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.training_type" :value="scope.row.trainingType"/>
        </template>
      </el-table-column>
      <el-table-column prop="feeStatus" label="缴费状态" width="100">
        <template #default="scope">
          <span :style="{ color: scope.row.feeStatus === '未交费' ? 'red' : 'green' }">
            {{ scope.row.feeStatus }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="fileStatus" label="档案状态" width="100">
        <template #default="scope">
          <span
            :style="{
              color:
                scope.row.fileStatus === '无档案' ? 'red' :
                scope.row.fileStatus === '档案不全' ? 'orange' : 'green'
            }"
          >
            {{ scope.row.fileStatus }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="fileMissing" label="档案缺失情况" width="120"></el-table-column>
      <el-table-column prop="submitStatus" label="提交状态" width="100">
        <template #default="scope">
          <span style="color: green;">{{ scope.row.submitStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="isCompleted" label="是否办结" width="100">
        <template #default="scope">
          <span :style="{ color: scope.row.isCompleted === '否' ? 'orange' : 'green' }">
            {{ scope.row.isCompleted }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="registerTime" label="报名时间" width="160"></el-table-column>
      <el-table-column prop="remark" label="备注" width="120"></el-table-column>
      <el-table-column label="操作" width="180" align="center" fixed="right">
        <template #default="scope">
          <el-button size="mini" type="text" @click="handleViewDetail(scope.row)">详情</el-button>
          <el-button size="mini" type="text" @click="handleRemoveStudent(scope.row)">删除</el-button>
          <el-button size="mini" type="text" @click="handleRemark(scope.row)">备注</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 添加/编辑学员弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="editDialogVisible" width="800px" append-to-body>
      <el-form ref="studentForm" :model="form" :rules="rules" label-width="120px" class="detail-form">
        <!-- 基础信息 -->
        <el-divider content-position="left">基础信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="编号">
              <el-input
                :value="form.id || '无'"
                class="non-interactive-input"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="证件编号" prop="idCard">
              <el-input v-model="form.idCard" placeholder="请输入证件编号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-select v-model="form.gender" placeholder="请选择性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入手机号码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位名称" prop="company">
              <el-input v-model="form.company" placeholder="请输入单位名称" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 报名信息 -->
        <el-divider content-position="left">报名信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="报名来源" prop="registerSource">
              <el-select v-model="form.registerSource" placeholder="请选择报名来源">
                <el-option
                  v-for="dict in dict.type.registration_method"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训类型" prop="trainingType">
              <el-select v-model="form.trainingType" placeholder="请选择培训类型">
                <el-option
                  v-for="dict in dict.type.training_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="缴费状态" prop="feeStatus">
              <el-select v-model="form.feeStatus" placeholder="请选择缴费状态">
                <el-option
                  v-for="dict in dict.type.payment_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报名时间" prop="registerTime">
              <el-date-picker
                v-model="form.registerTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择报名时间"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 档案信息 -->
        <el-divider content-position="left">档案信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="档案状态" prop="fileStatus">
              <el-select v-model="form.fileStatus" placeholder="请选择档案状态">
                <el-option label="无档案" value="无档案"></el-option>
                <el-option label="档案不全" value="档案不全"></el-option>
                <el-option label="有档案" value="有档案"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="档案缺失情况" prop="fileMissing">
              <el-input v-model="form.fileMissing" placeholder="请输入档案缺失情况" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="提交状态" prop="submitStatus">
              <el-select v-model="form.submitStatus" placeholder="请选择提交状态">
                <el-option label="未提交" value="未提交"></el-option>
                <el-option label="已提交" value="已提交"></el-option>
                <el-option label="审核中" value="审核中"></el-option>
                <el-option label="已审核" value="已审核"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 其他信息 -->
        <el-divider content-position="left">其他信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否办结" prop="isCompleted">
              <el-select v-model="form.isCompleted" placeholder="请选择是否办结">
                <el-option label="是" value="是"></el-option>
                <el-option label="否" value="否"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="form.remark"
                type="textarea"
                rows="3"
                placeholder="请输入备注信息"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitForm">确定</el-button>
      </div>
    </el-dialog>

    <!-- 学员详情弹窗 -->
    <el-dialog
      title="学员详情"
      :visible.sync="detailVisible"
      width="800px"
      append-to-body
    >
      <el-form :model="form" label-width="120px" class="detail-form">
        <!-- 基础信息 -->
        <el-divider content-position="left">基础信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="编号">
              <el-input
                :value="form.id || '无'"
                disabled
                readonly
                class="non-interactive-input"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名">
              <el-input
                :value="form.name || '无'"
                disabled
                readonly
                class="non-interactive-input"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="证件编号">
              <el-input
                :value="form.idCard || '无'"
                disabled
                readonly
                class="non-interactive-input"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别">
              <el-input
                :value="form.gender || '无'"
                disabled
                readonly
                class="non-interactive-input"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机号码">
              <el-input
                :value="form.phone || '无'"
                disabled
                readonly
                class="non-interactive-input"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位名称">
              <el-input
                :value="form.company || '无'"
                disabled
                readonly
                class="non-interactive-input"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 报名信息 -->
        <el-divider content-position="left">报名信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="报名来源">
              <el-input
                :value="mapRegistrationMethod(form.registerSource) || '无'"
                disabled
                readonly
                class="non-interactive-input"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训类型">
              <el-input
                :value="mapTrainingType(form.trainingType) || '无'"
                disabled
                readonly
                class="non-interactive-input"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="缴费状态">
              <el-input
                :value="mapPaymentStatus(form.feeStatus) || '无'"
                disabled
                readonly
                class="non-interactive-input"
                :style="{ color: form.feeStatus === '未交费' ? 'red' : 'green' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报名时间">
              <el-input
                :value="form.registerTime || '无'"
                disabled
                readonly
                class="non-interactive-input"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 档案信息 -->
        <el-divider content-position="left">档案信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="档案状态">
              <el-input
                :value="form.fileStatus || '无'"
                disabled
                readonly
                class="non-interactive-input"
                :style="{
                  color: form.fileStatus === '无档案' ? 'red' :
                        form.fileStatus === '档案不全' ? 'orange' : 'green'
                }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="档案缺失情况">
              <el-input
                :value="form.fileMissing || '无'"
                disabled
                readonly
                class="non-interactive-input"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="提交状态">
              <el-input
                :value="form.submitStatus || '无'"
                disabled
                readonly
                class="non-interactive-input"
                style="color: green"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 其他信息 -->
        <el-divider content-position="left">其他信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否办结">
              <el-input
                :value="form.isCompleted || '无'"
                disabled
                readonly
                class="non-interactive-input"
                :style="{ color: form.isCompleted === '否' ? 'orange' : 'green' }"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                :value="form.remark || '无'"
                disabled
                readonly
                class="non-interactive-input"
                type="textarea"
                rows="3"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 学员备注弹窗 -->
    <el-dialog
      :title="remarkTitle"
      :visible.sync="remarkVisible"
      width="800px"
      @close="resetRemarkForm"
      class="dialog-remark"
    >
      <el-form ref="remarkForm" :model="remarkForm" label-width="80px" :rules="remarkRules">
        <!-- 备注输入框 -->
        <el-form-item label="备注" prop="remarks">
          <el-input
            v-model="remarkForm.remarks"
            type="textarea"
            :rows="4"
            placeholder="请输入备注内容"
            style="width: 100%"
            maxlength="200"
            show-word-limit
          ></el-input>
        </el-form-item>

        <!-- 备注历史记录 -->
        <el-form-item label="备注历史">
          <el-table
            :data="remarkHistory"
            border
            style="width: 100%"
            :show-header="true"
            :loading="remarkLoading"
            empty-text="暂无备注记录"
          >
            <el-table-column prop="time" label="时间" width="200">
              <template slot-scope="scope">{{ scope.row.time }}</template>
            </el-table-column>
            <el-table-column prop="operator" label="备注人" width="150">
              <template slot-scope="scope">{{ scope.row.operator }}</template>
            </el-table-column>
            <el-table-column prop="content" label="备注" min-width="300">
              <template slot-scope="scope">{{ scope.row.content }}</template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="remarkVisible = false">取消</el-button>
        <el-button type="primary" @click="submitRemark" :loading="remarkSubmitting">提交</el-button>
      </div>
    </el-dialog>

    <!-- 班级交接备注弹窗 -->
    <el-dialog
      :title="remarkTitleClass"
      :visible.sync="remarkVisibleClass"
      width="800px"
      @close="resetRemarkFormClass"
      class="dialog-remark"
    >
      <el-form ref="remarkFormClass" :model="remarkFormClass" label-width="80px" :rules="remarkRulesClass">
        <!-- 备注历史记录 -->
        <el-form-item label="备注历史">
          <el-table
            :data="remarkHistoryClass"
            border
            style="width: 100%"
            :show-header="true"
            :loading="remarkLoadingClass"
            empty-text="暂无备注记录"
          >
            <el-table-column prop="time" label="时间" width="200">
              <template slot-scope="scope">{{ scope.row.time }}</template>
            </el-table-column>
            <el-table-column prop="operator" label="备注人" width="150">
              <template slot-scope="scope">{{ scope.row.operator }}</template>
            </el-table-column>
            <el-table-column prop="content" label="备注" min-width="300">
              <template slot-scope="scope">{{ scope.row.content }}</template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="remarkVisibleClass = false">取消</el-button>
      </div>
    </el-dialog>

    <!-- 学员通知弹窗 -->
    <el-dialog
      title="发送学员通知"
      :visible.sync="noticeDialogVisible"
      width="50%"
      :before-close="handleNoticeDialogClose"
    >
      <el-form :model="noticeForm" ref="noticeForm" :rules="noticeRules">
        <!-- 通知类型（短信/门户） -->
        <el-form-item label="通知类型" prop="sendTypes">
          <el-checkbox-group v-model="noticeForm.sendTypes">
            <el-checkbox label="0">短信</el-checkbox>
            <el-checkbox label="1">门户</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <!-- 通知内容 -->
        <el-form-item label="通知内容" prop="content">
          <el-input
            type="textarea"
            v-model="noticeForm.content"
            placeholder="请输入通知内容"
            rows="6"
            maxlength="500"
            show-word-limit
          ></el-input>
        </el-form-item>

        <!-- 发送范围 -->
        <el-form-item label="发送范围">
          <el-radio-group v-model="noticeForm.range" @change="handleRangeChange">
            <el-radio label="all">所有学员</el-radio>
            <el-radio label="selected">指定学员</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 指定学员选择 -->
        <el-form-item
          v-if="noticeForm.range === 'selected'"
          class="selected-users-form-item"
          prop="selectedUsers"
          :rules="[{ required: true, message: '请至少选择一个学员', trigger: 'change' }]"
        >
          <el-select
            v-model="noticeForm.selectedUsers"
            multiple
            placeholder="请输入学员姓名搜索并选择"
            filterable
            remote
            :remote-method="queryUsers"
            :loading="userLoading"
            style="width: 100%;"
            clearable
            @clear="handleSelectClear"
          >
            <el-option
              v-for="user in userOptions"
              :key="user.studentId"
              :label="user.studentName"
              :value="user.studentId"
            >
              <span style="float: left">{{ user.studentName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">
                身份证号：{{ user.idCard || '无证件号' }}
              </span>
            </el-option>
            <template #empty>
              <div style="text-align: center; color: #909399;">
                {{ userLoading ? '搜索中...' : '无匹配学员，请更换关键词' }}
              </div>
            </template>
          </el-select>
          <div class="selected-count" v-if="noticeForm.range === 'selected'">
            已选择 {{ noticeForm.selectedUsers.length }} 名学员
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="noticeDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitNotice" :loading="noticeLoading">发送</el-button>
      </div>
    </el-dialog>

    <!-- 二维码弹出框 -->
    <el-dialog
      title="培训班二维码"
      :visible.sync="CodeVisible"
      width="800px"
      @close="resetCode"
      class="dialog-remark"
      center
    >
      <div class="qrcode-container">
        <img
          :src="qrcodeUrl"
          alt="培训班二维码"
          class="qrcode-img"
          @error="handleQrcodeError"
        >
        <div v-if="qrcodeError" class="qrcode-error">
          二维码图片加载失败，请稍后重试
        </div>
        <div class="qrcode-desc">
          扫码查看培训班详情
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="CodeVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 班级交接弹窗 -->
    <el-dialog
      title="班级交接确认"
      :visible.sync="handoverDialogVisible"
      width="800px"
      append-to-body
    >
      <div class="class-info-panel">
        <h4 class="panel-title">班级信息</h4>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info-item">
              <span class="label">培训类别：</span>
              <span class="value">{{ trainingClassInfo && trainingClassInfo.trainingProjectNames || '无' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="label">培训班名称：</span>
              <span class="value">{{ trainingClassInfo && trainingClassInfo.trainingClassName || '无' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info-item">
              <span class="label">培训班编号：</span>
              <span class="value">{{ trainingClassInfo && trainingClassInfo.trainingClassCode || '无' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="label">期次：</span>
              <span class="value">{{ trainingClassInfo && trainingClassInfo.trainingSession || '无' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info-item">
              <span class="label">年份：</span>
              <span class="value">{{ trainingClassInfo && trainingClassInfo.trainingYear || '无' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="label">开班类型：</span>
              <span class="value">{{ trainingClassInfo && trainingClassInfo.mappedStartupType || '无' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info-item">
              <span class="label">培训类型：</span>
              <span class="value">{{ trainingClassInfo && trainingClassInfo.mappedTrainingType || '无' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="label">培训部门：</span>
              <span class="value">{{ trainingClassInfo && trainingClassInfo.trainingDepartmentName || '无' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info-item">
              <span class="label">班主任1：</span>
              <span class="value">{{ trainingClassInfo && trainingClassInfo.headTeacher1Name || '无' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="label">班主任2：</span>
              <span class="value">{{ trainingClassInfo && trainingClassInfo.headTeacher2Name || '无' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info-item">
              <span class="label">学员人数：</span>
              <span class="value">{{ trainingClassInfo && trainingClassInfo.registeredCount || 0 }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="label">总名额：</span>
              <span class="value">{{ trainingClassInfo && trainingClassInfo.totalQuota || 0 }}</span>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="handover-option">
        <span class="label">完成交接：</span>
        <el-radio-group v-model="handoverForm.isCompleted">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </div>

      <div class="reason-section">
        <span class="label">交接备注：</span>
        <el-input
          type="textarea"
          v-model="handoverForm.reasonRemark"
          :rows="4"
          placeholder="请输入交接备注（可选）"
          maxlength="200"
          show-word-limit
        />
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="handoverLoading">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listRemarksByParams,
  addRemarks
} from "@/api/training/remarks";
import {
  trainingClassList,
  classHandover,
  updateTrainingClass
} from "@/api/training/TrainingClass";
import {
  getClassStudents,
  batchQuit
} from "@/api/training/ClassStudent";
import {
  studentNoticeProcess
} from "@/api/training/studentNotice.js";

export default {
  name: 'TrainingClassPage',
  dicts: ["training_type", "class_status", "payment_status", "bmlb", "registration_method", "start_up_type"],
  data() {
    return {
      selectionDto:[],
      // 基础页面数据
      CodeVisible: false,
      qrcodeUrl: 'http://127.0.0.1:9300/statics/2025/09/19/1_20250919113028A006.jpg',
      qrcodeError: false,
      classId: "",
      trainingClassCode: "",
      className: "",
      handoverStatus: "",
      projectId: "",
      loading: false,
      tableData: [],
      userAllData: [], // 保存原始数据
      total: 0,
      selectedIds: [],
      showSearch: true,
      editDialogVisible: false,
      detailVisible: false,
      handoverDialogVisible: false,
      dialogTitle: '添加学员',
      searchForm: { name: '', phone: '', idCard: '' },
      queryParams: { pageNum: 1, pageSize: 10 },
      userFlagId: null,
      showHandoverUseButton: false,
      showHandoverButton: false,
      handoverLoading: false,

      // 表单数据
      form: {
        id: '',
        name: '',
        phone: '',
        idCard: '',
        gender: '男',
        company: '',
        registerSource: '',
        trainingType: '',
        feeStatus: '',
        fileStatus: '有档案',
        fileMissing: '',
        submitStatus: '已提交',
        isCompleted: '是',
        registerTime: '',
        remark: ''
      },

      // 学员备注相关数据
      remarkVisible: false,
      remarkTitle: "学员备注",
      remarkForm: { remarks: "", studentId: null },
      remarkHistory: [],
      remarkLoading: false,
      remarkSubmitting: false,
      remarkRules: {
        remarks: [{ required: true, message: "请输入备注内容", trigger: "blur" }]
      },

      // 班级交接备注相关数据
      remarkVisibleClass: false,
      remarkTitleClass: "班级交接",
      remarkFormClass: { remarks: "", classId: null },
      remarkHistoryClass: [],
      remarkLoadingClass: false,
      remarkSubmittingClass: false,
      remarkRulesClass: {
      },

      // 学员通知相关数据
      noticeDialogVisible: false,
      noticeLoading: false,
      noticeForm: {
        title: '',
        content: '',
        range: 'all',
        selectedUsers: [],
        sendTypes: [] // 0=短信，1=门户
      },
      noticeRules: {
        sendTypes: [{ required: true, message: '请选择通知类型', trigger: 'change' }],
        content: [{ required: true, message: '请输入通知内容', trigger: 'blur' }, { max: 500, message: '内容不能超过500个字符', trigger: 'blur' }]
      },
      userOptions: [],
      allUsers: [],
      userLoading: false,

      // 班级交接数据
      TrainingClassList: [],
      trainingClassInfo: null,
      handoverForm: { isCompleted: true, reasonRemark: '' },

      // 字典加载管理
      dictLoaded: false,
      dictCheckTimer: null,

      // 表单校验规则
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }, { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }],
        idCard: [{ required: true, message: '请输入证件编号', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
        company: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
        registerSource: [{ required: true, message: '请选择报名来源', trigger: 'change' }],
        trainingType: [{ required: true, message: '请选择培训类型', trigger: 'change' }],
        feeStatus: [{ required: true, message: '请选择缴费状态', trigger: 'change' }],
        fileStatus: [{ required: true, message: '请选择档案状态', trigger: 'change' }],
        isCompleted: [{ required: true, message: '请选择是否办结', trigger: 'change' }],
        registerTime: [{ required: true, message: '请选择报名时间', trigger: 'change' }]
      }
    };
  },
  computed: {
    // 预映射表格数据
    mappedTableData() {
      if (!this.isDictReady) return this.userAllData;

      return this.userAllData.map(item => ({
        ...item,
        // registerSource: this.mapRegistrationMethod(item.originalRegisterSource),
        // trainingType: this.mapTrainingType(item.originalTrainingType),
        // feeStatus: this.mapPaymentStatus(item.originalFeeStatus)
        registerSource: item.originalRegisterSource,
        trainingType: item.originalTrainingType,
        feeStatus: item.originalFeeStatus
      }));
    },

    registrationMethodMap() {
      return this.dict.label.registration_method || {};
    },
    trainingTypeMap() {
      return this.dict.label.training_type || {};
    },
    paymentStatusMap() {
      return this.dict.label.payment_status || {};
    },
    startupTypeMap() {
      return this.dict.label.start_up_type || {};
    },
    isDictReady() {
      return this.dictLoaded &&
             Object.keys(this.registrationMethodMap).length > 0 &&
             Object.keys(this.trainingTypeMap).length > 0 &&
             Object.keys(this.paymentStatusMap).length > 0 &&
             Object.keys(this.startupTypeMap).length > 0;
    }
  },
  created() {
    this.initDictCheck();
    this.getStudentList();
    this.getList();
    this.userFlagId = this.$store.state.user.id;
    this.waitForDictLoad().then(() => {
    });
  },
  beforeDestroy() {
    if (this.dictCheckTimer) clearInterval(this.dictCheckTimer);
  },
  watch: {
    '$route.params': {
      immediate: true,
      handler(params) {
        this.classId = params.classId;
        this.trainingClassCode = params.trainingClassCode;
        this.className = params.className;
        this.handoverStatus = params.handoverStatus;
        this.projectId = params.projectId;
      }
    },
    'dict.label': {
      handler(newVal) {
        if (newVal) this.checkDictReady();
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 字典加载相关
    initDictCheck() {
      this.checkDictReady();
      this.dictCheckTimer = setInterval(() => this.checkDictReady(), 500);
    },
    checkDictReady() {
      if (this.isDictReady && !this.dictLoaded) {
        this.dictLoaded = true;
        this.$nextTick(() => this.$forceUpdate());
      }
    },
    waitForDictLoad() {
      return new Promise(resolve => {
        if (this.isDictReady) {
          resolve();
          return;
        }
        const maxWait = 5000;
        const start = Date.now();
        const check = () => {
          if (this.isDictReady) resolve();
          else if (Date.now() - start < maxWait) setTimeout(check, 100);
          else {
            this.dictLoaded = true;
            resolve();
          }
        };
        check();
      });
    },

    // 字典映射方法
    mapRegistrationMethod(type) {
      if (!type) return '--';
      return this.registrationMethodMap[String(type)] || type;
    },
    mapTrainingType(type) {
      if (!type) return '--';
      return this.trainingTypeMap[String(type)] || type;
    },
    mapPaymentStatus(type) {
      if (!type) return '--';
      return this.paymentStatusMap[String(type)] || type;
    },
    mapStartupType(type) {
      if (!type) return '--';
      return this.startupTypeMap[String(type)] || type;
    },

    // 学员列表相关
    async getStudentList() {
      this.loading = true;
      try {
        const res = await getClassStudents({
          trainingClassId: this.classId,
          studentName: this.searchForm.name,
          phonenumber: this.searchForm.phone,
          idNumber: this.searchForm.idCard,
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize
        });
        this.total = res.total;

        // 保存原始数据，不进行字典映射
        this.userAllData = res.rows.map(item => {
          const reg = item.registrationDto;
          return {
            id: reg.registrationId,
            studentId: reg.studentId,
            name: reg.studentName,
            idCard: reg.idNumber,
            gender: reg.sex,
            phone: reg.phonenumber,
            company: reg.unitName || '--',
            // 保存原始值，用于计算属性映射
            originalRegisterSource: reg.registrationMethod,
            originalTrainingType: reg.trainingType,
            originalFeeStatus: reg.paymentStatus,
            // 其他非字典字段直接处理
            fileStatus: reg.recordStatus === '1' ? '有档案' : '无档案',
            fileMissing: reg.agreementStatus === 'false' ? '缺失' : '未缺失',
            submitStatus: reg.submitStatus === '1' ? '已提交' : '未提交',
            isCompleted: reg.classStatus === '1' ? '是' : '否',
            registerTime: reg.createTime || '--',
            remark: reg.remark || '无',
            registrationId: reg.registrationId
          };
        });

        // 表格数据使用计算属性
        this.tableData = this.mappedTableData;
      } catch (err) {
        this.$message.error('加载学员列表失败：' + (err.msg || err.message));
      } finally {
        this.loading = false;
      }
    },
    handleSearch() {
      this.queryParams.pageNum = 1;
      this.getStudentList();
    },
    handleReset() {
      this.searchForm = { name: '', phone: '', idCard: '' };
      this.queryParams.pageNum = 1;
      this.getStudentList();
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getStudentList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getStudentList();
    },
    handleSelectionChange(selection) {
      this.selectionDto = selection;
      this.selectedIds = selection.map(item => item.id);
    },

    // 学员操作相关
    handleAddStudent() {
      this.$router.push({
        name: '学员进出班管理',
        params: {
          className: this.className,
          classId: this.classId,
          handoverStatus: this.handoverStatus,
          projectId: this.projectId,
          trainingClassCode: this.trainingClassCode
        }
      });
    },
    handleEditStudent(row) {
      this.dialogTitle = '编辑学员';
      this.form = { ...row };
      this.editDialogVisible = true;
    },
    handleViewDetail(row) {
      if(row.trainingClassId !==undefined){
        this.form =row
      }else{
        this.form =  this.tableData.find(item => item.id === this.selectedIds[0]) || {};
      }
      this.detailVisible = true;
    },
    async handleRemoveStudent(row) {
      this.$confirm(`确定移除学员【${row.name}】吗？`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await batchQuit([{
            trainingClassId: this.classId,
            studentId: row.studentId,
            registrationId: row.registrationId
          }]);
          this.$message.success(`学员【${row.name}】已移除`);
          this.getStudentList();
        } catch (err) {
          this.$message.error('移除失败：' + (err.msg || err.message));
        }
      }).catch(() => this.$message.info('已取消移除'));
    },
    async handleRemoveStudents() {
      const selectedRows = this.tableData.filter(item => this.selectedIds.includes(item.id));
      this.$confirm(`确定移除选中的${selectedRows.length}名学员吗？`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await batchQuit(selectedRows.map(row => ({
            trainingClassId: this.classId,
            studentId: row.studentId,
            registrationId: row.registrationId
          })));
          this.$message.success(`已移除${selectedRows.length}名学员`);
          this.getStudentList();
        } catch (err) {
          this.$message.error('批量移除失败：' + (err.msg || err.message));
        }
      }).catch(() => this.$message.info('已取消批量移除'));
    },
    async handleSubmitForm() {
      this.$refs.studentForm.validate(async valid => {
        if (valid) {
          try {
            await new Promise(resolve => setTimeout(resolve, 500));
            this.$message.success(this.form.id ? '编辑学员成功' : '添加学员成功');
            this.editDialogVisible = false;
            this.getStudentList();
          } catch (err) {
            this.$message.error('提交失败：' + (err.msg || err.message));
          }
        }
      });
    },

    // 学员备注相关方法
    async handleRemark(row) {
      if(row.id ===undefined || row.id ===null){
        row=this.selectionDto[0];
      }
      const targetRow = row || this.tableData.find(item => this.selectedIds.includes(item.id));
      if (targetRow.id ===undefined && targetRow.id ===null) return this.$message.warning('请选择一个学员');

      this.remarkForm.studentId = targetRow.studentId;
      this.remarkTitle = `学员【${targetRow.name}】备注`;
      this.remarkLoading = true;

      try {
        const res = await listRemarksByParams({
          foreignId: targetRow.studentId,
          remarkType: "4"
        });
        this.remarkHistory = res.rows.map(item => ({
          time: item.createTime,
          operator: item.createBy,
          content: item.remarks
        }));
      } catch (err) {
        this.$message.error('加载备注历史失败：' + (err.msg || err.message));
        this.remarkHistory = [];
      } finally {
        this.remarkLoading = false;
        this.remarkVisible = true;
      }
    },
    resetRemarkForm() {
      this.$nextTick(() => {
        if (this.$refs.remarkForm) this.$refs.remarkForm.resetFields();
        this.remarkForm.remarks = "";
      });
    },
    async submitRemark() {
      this.$refs.remarkForm.validate(async valid => {
        if (valid) {
          this.remarkSubmitting = true;
          try {
            await addRemarks({
              foreignId: this.remarkForm.studentId,
              remarkType: "4",
              remarks: this.remarkForm.remarks
            });
            this.$message.success('备注提交成功');
            this.remarkVisible = false;
            this.getStudentList();
          } catch (err) {
            this.$message.error('备注提交失败：' + (err.msg || err.message));
          } finally {
            this.remarkSubmitting = false;
          }
        }
      });
    },

    // 班级交接备注相关方法
    async handleHandoverHistory(row) {
      this.remarkLoadingClass = true;

      try {
        const res = await listRemarksByParams({
          foreignId: this.classId,
          remarkType: "5"
        });
        this.remarkHistoryClass = res.rows.map(item => ({
          time: item.createTime,
          operator: item.createBy,
          content: item.remarks
        }));
      } catch (err) {
        this.$message.error('加载备注历史失败：' + (err.msg || err.message));
        this.remarkHistoryClass = [];
      } finally {
        this.remarkLoadingClass = false;
        this.remarkVisibleClass = true;
      }
    },
    resetRemarkFormClass() {
      this.$nextTick(() => {
        if (this.$refs.remarkFormClass) this.$refs.remarkFormClass.resetFields();
        this.remarkFormClass.remarks = "";
      });
    },

    // 学员通知相关方法
    handleStudentNotice() {
      this.initNoticeForm();
      this.noticeDialogVisible = true;
    },
    initNoticeForm() {
      this.noticeForm = {
        title: '',
        content: '',
        range: 'all',
        selectedUsers: [],
        sendTypes: []
      };
      this.loadStudentsData();
      this.$nextTick(() => {
        if (this.$refs.noticeForm) this.$refs.noticeForm.clearValidate();
      });
    },
    async loadStudentsData() {
      this.userLoading = true;
      try {
        const res = await getClassStudents({ trainingClassId: this.classId });
        this.allUsers = res.rows.map(item => ({
          studentId: item.registrationDto.studentId,
          studentName: item.registrationDto.studentName,
          idCard: item.registrationDto.idNumber,
          phone: item.registrationDto.phonenumber
        }));
        this.userOptions = [...this.allUsers];
        if (this.noticeForm.range === 'all') this.setAllStudents();
      } catch (err) {
        this.$message.error('加载学员数据失败：' + (err.msg || err.message));
        this.allUsers = [];
        this.userOptions = [];
      } finally {
        this.userLoading = false;
      }
    },
    handleRangeChange(newRange) {
      if (newRange === 'all') this.setAllStudents();
      else this.noticeForm.selectedUsers = [];
      this.$nextTick(() => {
        if (this.$refs.noticeForm) this.$refs.noticeForm.clearValidate('selectedUsers');
      });
    },
    setAllStudents() {
      this.noticeForm.selectedUsers = this.allUsers.map(user => user.studentId);
    },
    handleSelectClear() {
      this.noticeForm.selectedUsers = [];
    },
    queryUsers(query) {
      if (!query) {
        this.userOptions = [...this.allUsers];
        return;
      }
      this.userLoading = true;
      setTimeout(() => {
        this.userOptions = this.allUsers.filter(user =>
          user.studentName.includes(query) || user.idCard.includes(query)
        );
        this.userLoading = false;
      }, 300);
    },
    async submitNotice() {
      this.$refs.noticeForm.validate(async valid => {
        if (valid) {
          this.noticeLoading = true;
          try {
            const params = {
              sendType: this.noticeForm.range === 'all' ? "1" : "2",
              studentIds: this.noticeForm.range === 'all' ? [] : this.noticeForm.selectedUsers,
              isSms: this.noticeForm.sendTypes.includes('0') ? "1" : "0",
              isPortal: this.noticeForm.sendTypes.includes('1') ? "1" : "0",
              noticeTitle: this.noticeForm.title,
              noticeContent: this.noticeForm.content,
              sendTime: new Date().toLocaleString('zh-CN', {
                year: 'numeric', month: '2-digit', day: '2-digit',
                hour: '2-digit', minute: '2-digit', second: '2-digit',
                hour12: false
              }).replace(/\//g, '-'),
              trainingClassId: this.classId
            };
            await studentNoticeProcess(params);
            this.$message.success('通知发送成功');
            this.noticeDialogVisible = false;
          } catch (err) {
            this.$message.error('通知发送失败：' + (err.msg || err.message));
          } finally {
            this.noticeLoading = false;
          }
        }
      });
    },
    handleNoticeDialogClose() {
      this.noticeDialogVisible = false;
    },

    // 其他功能方法
    handleSchedule() {
      this.$router.push({
        name: '实践预约情况',
        params: { className: this.className, classId: this.classId, handoverStatus: this.handoverStatus }
      });
    },
    async handleHandoverUse() {
      if (!this.trainingClassInfo?.headTeacher2Name) {
        return this.$message.warning('班主任2未设置，无法发起交接');
      }
      if (this.statusStr(this.trainingClassInfo.handoverStatus) === '交接中') {
        return this.$message.warning('当前班级已处于交接中，无需重复发起');
      }

      this.$confirm(`确定将【${this.trainingClassInfo.trainingClassName}】交接给【${this.trainingClassInfo.headTeacher2Name}】吗？`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await updateTrainingClass({
            handoverStatus: "1",
            trainingClassId: this.classId
          });
          this.$message.success(`已发起交接，等待【${this.trainingClassInfo.headTeacher2Name}】确认`);
          this.getList();
          this.handoverStatus="交接中"
          this.showHandoverUseButton =false
        } catch (err) {
          this.$message.error('交接发起失败：' + (err.msg || err.message));
        }
      }).catch(() => this.$message.info('已取消交接'));
    },
    handleHandover() {
      this.handoverDialogVisible = true;
    },
    async handleSubmit() {
      this.handoverLoading = true;
      try {
        await classHandover({
          classHandoverRemark: this.handoverForm.reasonRemark,
          completeHandover: this.handoverForm.isCompleted ? "true" : "false",
          trainingClassId: this.classId,
          remarkType: "5"
        });
        this.$message.success('交接确认成功');
        if(this.handoverForm.isCompleted){
          this.handoverStatus="交接完成"
          this.showHandoverButton =false
        }
        this.handoverDialogVisible = false;
        this.getList();
      } catch (err) {
        this.$message.error('交接确认失败：' + (err.msg || err.message));
      } finally {
        this.handoverLoading = false;
      }
    },
    handleCancel() {
      this.handoverDialogVisible = false;
    },
    handleCode() {
      this.CodeVisible = true;
    },
    resetCode() {
      this.qrcodeError = false;
    },
    handleQrcodeError() {
      this.qrcodeError = true;
    },
    handleRefresh() {
      this.getStudentList();
      this.$message.success('刷新成功');
    },
    async handleExport() {
      try {
        this.$message.success('学员数据导出成功，已开始下载');
      } catch (err) {
        this.$message.error('导出失败：' + (err.msg || err.message));
      }
    },

    // 班级信息相关
    async getList() {
      try {
        const res = await trainingClassList({ trainingClassCode: this.trainingClassCode,trainingClassName:this.className });
        this.TrainingClassList = res.rows.map(item => ({
          ...item,
          mappedTrainingType: this.mapTrainingType(item.trainingType),
          mappedStartupType: this.mapStartupType(item.startupType)
        }));
        this.trainingClassInfo = this.TrainingClassList[0];
        this.flagHandoverUse();
        this.flagHandover();
      } catch (err) {
        this.$message.error('加载班级信息失败：' + (err.msg || err.message));
      }
    },
    flagHandoverUse() {
      this.showHandoverUseButton = this.trainingClassInfo &&
        String(this.userFlagId) === this.trainingClassInfo.headTeacher1 &&
        this.trainingClassInfo.handoverStatus === "0";
    },
    flagHandover() {
      this.showHandoverButton = this.trainingClassInfo &&
        String(this.userFlagId) === this.trainingClassInfo.headTeacher2 &&
        this.trainingClassInfo.handoverStatus === "1";
    },
    statusStr(status) {
      const map = { '0': '未交接', '1': '交接中', '2': '已交接' };
      return map[status] || '未知状态';
    }
  }
};
</script>

<style scoped>
.training-class-page {
  padding: 20px;
  background-color: #fff;
}

.class-info {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
}

.info-item {
  margin-right: 20px;
  margin-bottom: 10px;
  font-weight: 500;
  color: #333;
}

.search-form {
  margin-bottom: 20px;
}

.operation-buttons {
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.operation-buttons .el-button {
  padding: 6px 10px;
}

.el-table {
  margin-bottom: 15px;
}

.pagination {
  margin-top: 15px;
  text-align: right;
}

.dialog-footer {
  text-align: right;
  padding-top: 15px;
}

/* 详情表单样式 */
.detail-form {
  margin-top: 10px;
}

::v-deep .el-form-item {
  margin-bottom: 15px;
}

::v-deep .el-form-item__label {
  font-weight: 500;
  color: #606266;
}

/* 二维码弹窗样式 */
.qrcode-container {
  text-align: center;
  padding: 20px 0;
}

.qrcode-img {
  width: 300px;
  height: 300px;
  object-fit: contain;
  margin-bottom: 15px;
  border: 1px solid #eee;
  padding: 10px;
  border-radius: 4px;
}

.qrcode-error {
  color: #f56c6c;
  font-size: 14px;
  margin-top: 20px;
}

.qrcode-desc {
  color: #666;
  font-size: 14px;
  margin-top: 10px;
}

/* 班级交接弹窗样式 */
.class-info-panel {
  border: 1px solid #e4e7ed;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 4px;
}

.panel-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.info-item .label {
  width: 120px;
  color: #606266;
  flex-shrink: 0;
}

.info-item .value {
  color: #333;
}

.handover-option {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.handover-option .label {
  width: 120px;
  color: #606266;
}

.reason-section {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.reason-section .label {
  width: 120px;
  color: #606266;
  padding-top: 6px;
}

.reason-section .el-textarea {
  flex: 1;
}

/* 学员备注弹窗样式 */
::v-deep .dialog-remark .el-textarea {
  width: 100%;
}

::v-deep .dialog-remark .el-table {
  margin-top: 10px;
}

/* 学员通知弹窗样式 */
.selected-users-form-item {
  margin-top: 10px;
}

.selected-count {
  margin-top: 5px;
  font-size: 12px;
  color: #666;
}

/* 非交互输入框样式 */
.non-interactive-input {
  background-color: #f5f7fa;
  cursor: not-allowed;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .operation-buttons {
    gap: 8px;
  }
}

@media (max-width: 768px) {
  .class-info {
    flex-direction: column;
  }

  .info-item {
    margin-right: 0;
  }

  .operation-buttons {
    justify-content: flex-start;
  }
}
</style>
